﻿@{
    Layout = null;
    var objUserInfo = ViewBag.UserInfo as UserInfo;
}
@model ArticleResultInfo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>@Model.ArticleInfo.ArticleTitle</title>
    <!-- 基础css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/pkg/css/base.css">
    <!-- 基础css end -->
    <!-- 组件依赖css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/button/button.default.css">
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/button/button.css">
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/modal/modal.css">
    <link href="/Content/benzxh/js/widget/swiper/swiper.min.css" rel="stylesheet" />
    <link href="/Content/benzxh/js/widget/swiper/swiper.scale.css" rel="stylesheet" />
    <!-- 组件依赖css end -->
    <!-- 公用css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/pkg/css/layout.css?ver=201511261334">
    <!-- 公用css end -->
    <!-- 页面css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/lynn.css?ver=201511261334">
    <link type="text/css" href="/Content/benzxh/css/fix.css" rel="stylesheet" />
    <!-- 页面css end -->
    <style>
        #article_content img, #article_content video {
            max-width: 100%;
        }

        #detail .article-title {
            font-size: 18px;
        }

        #detail .publish-time {
            font-size: 12px;
            padding: 0;
            margin-top: 10px;
        }

        #detail .word-wrap {
            white-space: normal;
        }

        .content {
            padding: 0;
            background-color: transparent;
        }

        header, article {
            padding: 10px 20px;
            background-color: rgba(255,255,255,0.1);
        }

        header {
            padding-bottom: 30px;
            margin-bottom: 5px;
        }

        .count {
            margin-left: 0;
        }

        .icon-eyes {
            width: 25px;
            height: 18px;
            margin-left: 30px;
            margin-right: 8px;
        }
    </style>
</head>
<body id="detail">
    <div class="background-full"></div>
    <div id="wrapper">
        <div class="padding-0">
            <div class="content">
                <div style="padding-bottom:0;">
                    <header>
                        @*<div id="AuthorAvatar" class="user-avatar float-left" style="background-image: url(@Model.ArticleInfo.S1);">
                                <div class="user-badge"></div>
                            </div>
                            <div class="user-name">
                                <span class="font-color">LV0</span>
                                <span id="article_username">@Model.ArticleInfo.ArticleAuthor</span>
                            </div>*@
                        <div id="article_title" class="article-title word-wrap">
                            @Model.ArticleInfo.ArticleTitle<br>
                            @Model.ArticleInfo.SimpleTitle
                        </div>
                        <div class="publish-time">@Model.ArticleInfo.ApproveDate.ToString("yyyy-MM-dd")</div>
                    </header>
                    <article>
                        <div id="article_content" class="word-wrap">
                            @Html.Raw(Model.ArticleContent)
                        </div>
                        @if (Model.ArticlePictureCollection.IsNoNull())
                        {
                            int i = 1;
                            <ul class="margin-top-10 margin-bottom-10 image-box" id="article_imagelist">
                                @foreach (var objArticlePicture in Model.ArticlePictureCollection)
                                {
                                    <li id="img@(i)" class="image image-cover" style="background-image: url(@objArticlePicture.PictureUrl)" data-url="@objArticlePicture.PictureUrl"></li>
                                    i++;
                                }
                            </ul>
                        }
                        <section class="actions" style="margin-bottom:0px;">
                            <div class="padding-bottom-0">
                                <span id="diggclass" @Html.Raw(Model.ArticleInfo.IsDigg ? "class=\"icon icon-praised\"" : "class=\"icon icon-ambia\"") class="icon icon-ambia" @Html.Raw(Model.ArticleInfo.IsDigg ? "" : "onclick=\"DiggArticle(" + Model.ArticleInfo.ArticleId + ")\"")></span>
                                <span id="diggcount" class="count">@Model.ArticleInfo.DiggCount</span>
                                <span class="icon icon-eyes"></span><span class="count">@Model.ArticleInfo.ViewCount</span>
                                <span id="btnComment" class="icon icon-comments" style="display:none;"></span>
                                <span id="commentcount" class="count" style="display:none;">@Model.ArticleInfo.CommentCount</span>
                            </div>
                            <div id="comment-input" class="relative" style="display:none;">
                                <div class="padding-20">
                                    <textarea id="txtComment" class="input-text width-full" data-emotion></textarea>
                                    <div class="text-align-right relative" style="margin-top:8px;">
                                        <i id="btnEmotionSelect" class="icon-emotion" style="position:absolute; left:0;"></i>
                                        <button id="btnSubmitComment" type="button" class="button" style="padding:3px 15px;" onclick="AddComment('@Model.ArticleInfo.ArticleId')">发表</button>
                                    </div>
                                </div>
                                <div data-part="emotion" style="display: none; margin-top: -20px;"></div>
                            </div>

                        </section>
                    </article>
                </div>
            </div>
            <section class="comments comment-padding" style="padding-top: 0;">
                <ul id="commentlist" class="comment-list"></ul>
                <button id="comment_more" type="button" class="default-button margin-top-20 width-full" onclick="BindComments(10)" style="display: none;">更多评论</button>
            </section>

        </div>
    </div>

    <!-- 组件依赖js begin -->
    <script type="text/javascript" charset="utf-8" src="/Content/BenzXH/pkg/js/core.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/BenzXH/js/widget/modal/modal.js"></script>
    <script src="/Content/benzxh/js/widget/swiper/swiper.jquery.min.js"></script>
    <script src="/Content/benzxh/js/widget/swiper/swiper.scale.js?ver=201512081026"></script>
    <script src="/Content/benzxh/js/common.js?ver=201511261333"></script>
    <script type="text/javascript">
        $(function () {
            var userInfo = JSON.parse('@Html.Raw( objUserInfo.JsonSerialize())');
            IncreaseArticle('@Model.ArticleInfo.ArticleId');
        });
        function DiggArticle(articleId) {
            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/benzxh/diggarticle/" + articleId;
            objAjaxEntity.executeSuccess = function (objInvokeResult) {
                if (objInvokeResult.ResultCode != "Success") {
                    alert(objInvokeResult.ResultMessage);
                    return;
                }
                $("#diggcount").html(parseInt($("#diggcount").html()) + 1);
                $("#diggclass").removeClass("icon-ambia").addClass("icon-praised");
            }
            objAjaxEntity.execute();
        }

        function IncreaseArticle(articleId) {
            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/benzxh/increaseviewcount/" + articleId;
            objAjaxEntity.executeSuccess = function (objInvokeResult) { };
            objAjaxEntity.execute();
        }

        $("#btnComment").click(toggleCommentInput);

        function toggleCommentInput() {
            if ($("#comment-input").is(":visible")) {
                $("#comment-input").hide();
            } else {
                $("#comment-input").show();
                $("#txtComment").focusin(function () {
                    /* $(this).focusEnd();*/
                });
            }
        }

        $("#article_content img").each(function (idx, el) {
            var $this = $(this);
            $this.attr("data-url", $this.attr("src"));
            $this.on("click", function () {
                slideImage({
                    container: "#article_content",
                    selector: "img",
                    current: idx
                })
            });
        });

    </script>
</body>
</html>